import React, { useState, useEffect } from 'react';
import 'antd/dist/antd.css';
import { Card, Input, Icon, Button, Spin, message } from 'antd';
import { connect } from 'dva';
import styles from './styles/MainPage.less'
import request from '../utils/request';
import servicePath from '../config/apiUrl'
import axios from 'axios'


function MainPage(props) {

  const [userName, setUserName] = useState('')
  const [password, setPassword] = useState('')
  const [isLoading, setIsLoading] = useState(false)

  const checkLogin = () => {
    setIsLoading(true)

    if (!userName) {
      message.error('用户名不能为空')
      setTimeout(() => {
        setIsLoading(false)
      }, 500)
      return false
    } else if (!password) {
      message.error('密码不能为空')
      setTimeout(() => {
        setIsLoading(false)
      }, 500)
      return false
    }
    let dataProps = {
      'userName': userName,
      'passWord': password
    }
    // axios({
    //   method: "post",
    //   url: servicePath.checkLogin,
    //   data: dataProps,
    //   // headers: {
    //   //   "Content-Type": "application/json;charset=utf-8",
    //   //   "Access-Control-Allow-Origin":"*"
    //   // },
    //   withCredentials: true,
    //   header:{   'Access-Control-Allow-Origin':'*' }
    // }).then(res => {
    //   console.log("res---", res)
    //   if (res.data.code == '0000') {
    //     localStorage.setItem('openId', res.data.openId)
    //     props.history.push('/index')
    //   } else {
    //     message.error('用户名密码错误')
    //   }
    // })
    request(servicePath.checkLogin, {
      method: "post",
      body: dataProps,
      credentials: 'include'//同源跨域都携带cookies/session
    }).then(res => {
      console.log("res~~~", res)
      if (res.data.code == '0000') {
        localStorage.setItem('openId', res.data.openId)
        props.history.push('/index')
      } else {
        message.error('用户名密码错误')
      }
    })

    setIsLoading(false)
    // setTimeout(() => {
    //   setIsLoading(false)
    // }, 1000)
  }


  useEffect(() => {

    //检查是否已经登录
    let openId = localStorage.getItem('openId')
    let dataProps = { 'openId': openId }
    console.log(openId)
    if (openId) {
      request(servicePath.checkLogin, {
        method: "post",
        body: dataProps,
        credentials: 'include'//同源跨域都携带cookies/session
      }).then(res => {
        console.log("检查是否已经登录", res)
        if (res.data.data) {
          message.success('已经登录')
          props.history.push('/index')
        }
      })
    }
    return () => {
      // console.log("login -- before destory");
    }// before destory
  }, [])//[] once
  return (
    <div className={styles['login-div']}>

      <Spin tip="Loading..." spinning={isLoading}>
        <Card title="JSPang Blog  System" bordered={true} style={{ width: 400 }} >
          <Input
            id="userName"
            size="large"
            placeholder="Enter your userName"
            prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
            onChange={(e) => { setUserName(e.target.value) }}
          />
          <br /><br />
          <Input.Password
            id="password"
            size="large"
            placeholder="Enter your password"
            prefix={<Icon type="key" style={{ color: 'rgba(0,0,0,.25)' }} />}
            onChange={(e) => { setPassword(e.target.value) }}
          />
          <br /><br />
          <Button type="primary" size="large" block onClick={checkLogin} > Login in </Button>
        </Card>
      </Spin>
    </div>
  );

}

MainPage.protoTypes = {

};

export default connect()(MainPage)
